<template>
  <a-input-password v-model:value="value_" @change="inputHandler" :maxLength="max" />
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { Input } from 'ant-design-vue';
  import { ConfigItem } from './control.data';
  export default defineComponent({
    components: { [Input.name]: Input, AInputPassword: Input.Password },
    props: {
      value: { type: String },
      config: { type: Object as PropType<ConfigItem>, default: () => ({} as ConfigItem) },
    },
    emits: ['update:value'],
    setup(props, { emit }) {
      let value_ = ref(props.value);
      const inputHandler = (e) => {
        const { value } = e.target;
        emit('update:value', value);
      };
      const max = computed(() => {
        const { config } = props;
        if (config.dataType === 'ShortText') {
          return 200;
        }
        if (config.dataType === 'LargeText') {
          return 400;
        }
        return null;
      });
      return {
        inputHandler,
        max,
        value_,
      };
    },
  });
</script>
